<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      a,
      img {
        border: 0;
        text-decoration: none;
      }
      body {
        font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
      }
    </style>
    <script src="../day 21/tools.js"></script>
    <script>
      window.onload = function () {
        /**
         * 我们的每一个菜单都是div
         * 当div具有collapsed这个类时，div就是折叠的状态
         * 当div没有这个类时，就是展开状态
         *
         */
        /**
         *点击菜单，切换菜单的显示状态
         *
         */
        //获取所有的class为menuSpan的元素
        var menuSpan = document.getElementsByClassName(".menuSpan");

        // 定义一个变量，来保存当前打开的菜单
        var openDiv = menuSpan[0];

        //为span绑定单击响应函数
        for (var i = 0; i < menuSpan.length; i++) {
          menuSpan[i].onclick = function () {
            // this代表当前点击的span
            var parentDiv = this.parentNode;

            // 切换菜单的显示状态
            toggleMenu(parentDiv);

            // 判断openDiv和parentDiv是否相同
            if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
              // 打开菜单以后，关闭之前打开的菜单
              // 为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
              // toggleClass(openDiv, "collapsed");

              // 切换菜单的显示状态
              toggleMenu(openDiv);
            }

            // 修改openDiv为当前打开的菜单
            openDiv = parentDiv;
          };
        }
        /**
         * 用来切换
         */
        function toggleMenu(obj) {
          // 在切换类之前，获取元素的高度
          var begin = parentDiv.offsetHeight;
          // 切换parentDiv的显示
          toggleClass(parentDiv, "collapsed");

          // 在切换类之后获取一个高度
          var end = parentDiv.offsetHeight;

          // 动画效果就是将高度从begin向end过渡
          // 将元素高度重置为begi
          parentDiv.style.height = begin + "px";

          // 执行动画，从bengin向end过渡
          move(parentDiv, "height", end, 10, function () {
            parentDiv.style.height = "";
          });
        }
      };
    </script>
  </head>
  <body>
    <div id="my_menu" class="sdmenu">
      <div>
        <span class="my_menuSpan">在线工具</span>
        <a href="#">图形优化</a>
        <a href="#">收藏夹图标生成器</a>
        <a href="#">邮件</a>
        <a href="#">htaccess密码</a>
        <a href="#">梯度图形</a>
        <a href="#">按钮生成器</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">支持我们</span>
        <a href="#">推荐我们</a>
        <a href="#">链接我们</a>
        <a href="#">网络资源</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">合作伙伴</span>
        <a href="#">工具包</a>
        <a href="#">css驱动</a>
        <a href="#">codingForums</a>
        <a href="#">css例子</a>
      </div>
      <div class="collapsed">
        <span class="menuSpan">合测试电流</span>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
        <a href="#">Current or not</a>
      </div>
    </div>
  </body>
</html>
